<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../js/antd/antd.css"/>
    <script src="../js/vuejs/vue.min.js"></script>
    <script src="../js/vuejs/axios.min.js"></script>
    <script src="../js/antd/antd.min.js"></script>
    <script src="../js/common.js"></script>
</head>
<style>
    body {
        background-color: #f0f2f5;
    }

    .ant-table-placeholder {
        background: #f5f6f7 !important;
    }

    .ant-table-thead > tr > th {
        background: #e3e9f1 !important;
    }

    .link_a {
        color: rgba(0, 0, 0, 0.65);;
    }

    .link_a:hover {
        color: #1890ff;
    }

    .ant-modal-mask {
        background-color: #f3f5f9;
        opacity: 0.5;
    }
</style>
<body>
<div id="mainDiv">
    <a-spin :spinning="loading">
        <div>
            <a-form-model layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}">
                <a-form-model-item label="数据库：">
                    <a-select v-model:value="currConnId" @change="changeConn" style="width: 150px">
                        <a-select-option v-for="conn in conns" :key="conn.id" :value="conn.id">
                            {{ conn.connName }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="表名：">
                    <a-input></a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchTables" type="primary" icon="search">查 询</a-button>
                </a-form-model-item>
            </a-form-model>
            <hr style="border: 0.5px solid #3ac5e8;"/>
            <a-form-model layout="inline" :model="form" ref="ruleForm" :rules="rules" :label-col="{span: 6}"
                          :wrapper-col="{span: 16}">
                <a-form-model-item label="作者" prop="author">
                    <a-input v-model="form.author"/>
                </a-form-model-item>
                <a-form-model-item label="包" prop="packages">
                    <a-input v-model="form.packages" placeholder="com.xxx.xxx"/>
                </a-form-model-item>
                <a-form-model-item label="模块" prop="moduleName">
                    <a-input v-model="form.moduleName" placeholder="sys"/>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="genCode" type="primary" icon="cloud-download">代码生成</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div style="margin-top: 15px">
            <a-table :columns="columns" :data-source="dataList"
                     :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
            </a-table>
        </div>
    </a-spin>
</div>

</body>
<script>
    (function () {
        new Vue({
            el: "#mainDiv",
            data: {
                loading: false,
                query: {},
                dataList: [],
                columns: [
                    {
                        dataIndex: 'tableName',
                        key: 'tableName',
                        title: '表名',
                        width: "30%"
                    },
                    {
                        title: '表注释',
                        dataIndex: 'tableComment',
                        key: 'tableComment',
                        width: "30%"
                    },
                    {
                        title: '创建时间',
                        dataIndex: 'createTime',
                        key: 'createTime',
                        width: "30%"
                    },
                ],
                baseURL: "",
                conns: [],
                tableQuery: {},
                tableList: [],
                selectedRowKeys: [],
                currConnId: null,
                showCodeGenModal: false,
                form: {},
                rules: {
                    author: [{required: true, message: '请输入作者', trigger: 'blur'}],
                    packages: [{required: true, message: '请输入包路径', trigger: 'blur'}],
                }
            },
            methods: {
                searchConns: function () {
                    let me = this
                    this.loading = true
                    getReq(this.baseURL + "/conn/list", this.query).then(res => {
                        let result = res.data
                        me.loading = false
                        if (result.code == 0) {
                            me.conns = result.data
                            if (me.conns.length > 0) {
                                me.changeConn(me.conns[0].id)
                                me.currConnId = me.conns[0].id
                            }
                        }
                    })
                },
                changeConn(id) {
                    this.tableQuery.connId = id;
                    this.searchTables()
                },
                searchTables() {
                    getReq(this.baseURL + "/conn/get-tables", this.tableQuery).then(res => {
                        let result = res.data
                        if (result.code == 0) {
                            this.dataList = result.data
                        }else {
                            antd.message.error("查询错误：" + result.msg)
                        }
                    })
                },
                onSelectChange(selectedRowKeys) {
                    this.selectedRowKeys = selectedRowKeys;
                },
                genCode() {
                    if (this.selectedRowKeys.length < 1) {
                        antd.message.error("请先勾选要生成代码的表")
                    } else {
                        this.$refs.ruleForm.validate(valid => {
                            if (valid) {
                                let tableNames = []
                                for (let i = 0; i < this.selectedRowKeys.length; i++) {
                                    let name = this.dataList[this.selectedRowKeys[i]].tableName
                                    tableNames.push(name)
                                }
                                parent.location.href = this.baseURL + "/code/gen?connId=" + this.currConnId +
                                    "&" + queryParams(this.form, false) + "&tableNames=" + tableNames.join(",");
                            }
                        });

                    }
                }
            },
            mounted() {
                this.searchConns()
            },
            created() {
                this.baseURL = location.href.replace("/html/tables.html", "")
            }
        })
    })();
</script>
</html>
